<template>
  <div class="app-container calendar-list-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="usePayCode">消码</el-button>
      <audio id="audio" src="https://oss-hong-yi.oss-cn-beijing.aliyuncs.com/180528.mp3"></audio>
    </div>

    <el-table size="small" :data="list" v-loading="listLoading" border fit highlight-current-row element-loading-text="正在查询中。。。">
      <el-table-column align="center" label="用户ID" prop="userId"></el-table-column>
      <el-table-column align="center" label="用户昵称" prop="consignee"></el-table-column>
      <el-table-column align="center" label="用户手机" prop="mobile"></el-table-column>
      <el-table-column align="center" label="订单状态" prop="status">
        <template slot-scope="scope">
          <el-tag>{{scope.row.status | orderStatusFilter}}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="数量" prop="number">
        <template slot-scope="scope"></template>
      </el-table-column> -->
      <el-table-column align="center" label="订单金额" prop="orderIntegral" min-width="100px">
        <template slot-scope="scope">
          {{scope.row.orderIntegral + "积分"}}
        </template>
      </el-table-column>

      <el-table-column align="center" label="支付金额" prop="actualIntegral" min-width="100px">
        <template slot-scope="scope">
          {{scope.row.actualIntegral + "积分"}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付时间" prop="payTime" sortable width="200px"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!--查询订单弹框-->
    <el-dialog title="付款码详情" :visible.sync="dialogFormVisible">
      <el-input clearable class="filter-item" style="width: 260px; margin : 20px  ;padding-left : 30px" v-model="listQuery.payCodeSn" placeholder="请输入订单编号"></el-input>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchPayCode">查找</el-button>
      <el-form ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="用户ID" prop="userId">
          <el-input class="input_style" v-model="dataForm.userId" readonly></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="username">
          <el-input class="input_style" v-model="dataForm.username" readonly></el-input>
        </el-form-item>
        <el-form-item label="用户手机" prop="mobile">
          <el-input class="input_style" v-model="dataForm.mobile" readonly></el-input>
        </el-form-item>
        <el-form-item label="订单状态" prop="payCodeStatus">
          <el-input class="input_style" v-model="statusDic[dataForm.payCodeStatus]" readonly></el-input>
        </el-form-item>
        <!-- <el-form-item label="数量" prop="number">
          <el-input v-model="dataForm.number" disabled="true"></el-input>
        </el-form-item> -->
        <el-form-item label="订单金额" prop="goodsPrice">
          <el-input class="input_style" v-model="dataForm.goodsPrice" readonly></el-input>
        </el-form-item>
        <el-form-item label="支付金额" prop="actualPrice">
          <el-input class="input_style" v-model="dataForm.actualPrice" readonly></el-input>
        </el-form-item>
        <el-form-item label="支付时间" prop="payTime">
          <el-input class="input_style" v-model="dataForm.payTime" readonly></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">取消</el-button>
        <el-button type="primary" @click="changePayCodeState" v-show="display">消码</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
.input_style {
  width: 100%;
}
</style>


 <script>
import { listTotalpayCode, listPayCode, payCodeState } from '@/api/payCode'

const statusMap = {
  0: '未使用',
  1: '已使用',
  2: '已超时'
}

export default {
  name: 'payCode',
  data() {
    return {
      show: false,
      list: undefined,
      total: undefined,
      listLoading: false,
      display: false,
      statusDic: ['未使用', '已使用', '已超时'],
      dataForm: {
        userId: undefined,
        username: undefined,
        number: 1,
        payCodeStatus: undefined,
        goodsPrice: undefined,
        actualPrice: undefined,
        payTime: undefined
      },

      dialogFormVisible: false,
      listQuery: {
        payCodeSn: '',
        page: 1,
        limit: 20
      }
    }
  },
  filters: {
    orderStatusFilter(status) {
      return statusMap[status]
    }
  },
  created() {
    this.getTotalList()
  },

  methods: {
    trimStr: function(str) {
      return str.replace(/(^\s*)|(\s*$)/g, '')
    },
    getTotalList() {
      this.listLoading = true
      listTotalpayCode(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getTotalList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getTotalList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getTotalList()
    },
    resetForm() {
      this.dataForm = {
        userId: undefined,
        consignee: undefined,
        status: '',
        orderIntegral: undefined,
        actualIntegral: undefined,
        payTime: ''
      }
    },
    changePayCodeState: function() {
      payCodeState(this.listQuery.payCodeSn).then(response => {
        this.dialogFormVisible = false
        this.listQuery.payCodeSn = ''
        this.dataForm.userId = ''
        this.dataForm.username = ''
        this.dataForm.payCodeStatus = ''
        this.dataForm.mobile = ''
        this.dataForm.goodsPrice = ''
        this.dataForm.actualPrice = ''
        this.dataForm.payTime = ''
        this.listQuery.payCodeSn = ''
        if (response.data.data.items === 1) {
          this.$notify({
            title: '成功',
            message: '消码成功',
            type: 'success',
            duration: 1500
          })
        } else {
          this.$notify({
            title: '失败',
            message: '消码失败',
            type: 'fail',
            duration: 1500
          })
        }
        this.getTotalList()
      })
    },
    usePayCode: function() {
      this.dialogFormVisible = true
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.dataForm.userId = ''
      this.dataForm.username = ''
      this.dataForm.payCodeStatus = ''
      this.dataForm.mobile = ''
      this.dataForm.goodsPrice = ''
      this.dataForm.actualPrice = ''
      this.dataForm.payTime = ''
      this.listQuery.payCodeSn = ''
    },
    searchPayCode: function() {
      // this.listLoading = true;
      var currentPayCodeSn = this.trimStr(this.listQuery.payCodeSn)
      if (currentPayCodeSn.length === 19) {
        listPayCode(currentPayCodeSn)
          .then(response => {
            console.log(response)
            this.dataForm.userId = response.data.data.items.userId
            this.dataForm.username = response.data.data.items.consignee
            this.dataForm.payCodeStatus = response.data.data.items.status
            this.dataForm.mobile = response.data.data.items.mobile
            this.dataForm.goodsPrice = response.data.data.items.orderIntegral
            this.dataForm.actualPrice = response.data.data.items.actualIntegral
            this.dataForm.payTime = response.data.data.items.payTime

            if (response.data.data.items.status !== 0) {
              this.display = false
            } else {
              this.display = true
            }
          })
          .catch(() => {})
      } else {
        this.$notify({
          title: '失败',
          message: '代金劵码输入错误',
          type: 'fail',
          duration: 5000
        })
      }
    }
  }
}
</script>





